<!--
 * @FilePath: RowItem.vue
 * @Author: jack
 * @Date: 2025-02-14 10:44:11
 * @LastEditors: 
 * @LastEditTime: 2025-02-14 10:44:11
 * Copyright: 2025 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
 <!-- 搜索查询手动查询 -->
<template>
  <el-col :xl="props.span + 2" :lg="store.hasLeftSide ? props.span + 4 : props.span + 2" :sm="props.span + 4"
    v-show="(props.count < 4 && store.hasLeftSide && screenWidth < 1920) || (props.count < 5 && store.hasLeftSide && screenWidth >= 1920) || (!store.hasLeftSide && props.count < 5 && screenWidth < 1920) || (!store.hasLeftSide && props.count < 5 && screenWidth >= 1920) || store.searchShow"
    style="margin: 7.5px 0;">
    <div class="row align-items">
      <div class="label-font-box" :style="widthCustomer" v-if="props.label != ''">
        {{ props.label }}
      </div>
      <slot></slot>
    </div>
  </el-col>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { PiniaStore } from '../../store'
interface PropsType {
  //   是否需要更多按钮
  label?: string
  span?: number
  count: number
}
const props = withDefaults(defineProps<PropsType>(), {
  label: '',
  span: 4,
  count: 1,
})
const store = PiniaStore()
const screenWidth = ref(0)
const widthCustomer = computed(() => {
  return 'width:' + 20 * props.label.length + 'px;'
})
onMounted(() => {
  screenWidth.value = document.body.clientWidth
  window.addEventListener("resize", () => {
    screenWidth.value = document.body.clientWidth
  });

})
</script>
<style lang="scss" scoped>
.label-font-box {
  padding: 0 5px;
  width: 55px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.myui-col.el-col-xl-6 {
  display: block;
  max-width: 20%;
  flex: 0 0 20%;
}
</style>

